<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0%;
    }

    .fu {
        position: relative;
        transform: rotate(180deg);
        width: 200px;
        height: 200px;
        border: 5px solid black;
        border-radius: 50%;
        margin: auto;
        align-items: center;
    }

    .fu>div:nth-child(-n+6) {
        width: 6px;
        height: 200px;
        background-color: #aaa;
        position: absolute;
        left: 50%;
        margin-left: -3px;
    }

    .itme1 {
        transform: rotate(30deg);
    }

    .itme2 {
        transform: rotate(60deg);
    }

    .itme3 {
        transform: rotate(90deg);
    }

    .itme4 {
        transform: rotate(120deg);
    }

    .itme5 {
        transform: rotate(150deg);
    }

    .p1 {
        width: 180px;
        height: 180px;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .centre {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    .number {
        transform: rotate(180deg);
        height: 180px;
        position: relative;
    }

    .em1 {
        position: absolute;
        top: 10px;
        right: 50px;
    }

    .em2 {
        position: absolute;
        top: 35px;
        right: 20px;
    }

    .em3 {
        position: absolute;
        top: 80px;
        right: 10px;
    }

    .em4 {
        position: absolute;
        top: 122px;
        right: 18px;
    }

    .em5 {
        position: absolute;
        top: 148px;
        right: 46px;
    }

    .em6 {
        position: absolute;
        bottom: 0px;
        right: 86px;
    }

    .em7 {
        position: absolute;
        bottom: 12px;
        left: 45px;
    }

    .em8 {
        position: absolute;
        bottom: 42px;
        left: 14px;
    }

    .em9 {
        position: absolute;
        bottom: 80px;
        left: 5px;
    }

    .em10 {
        position: absolute;
        bottom: 120px;
        left: 10px;
    }

    .em11 {
        position: absolute;
        top: 12px;
        left: 35px;
    }

    .em12 {
        position: absolute;
        top: 0px;
        left: 76px;
    }

    .hour {
        width: 6px;
        height: 50px;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -3px;
        animation: time;
        transform-origin: top center;
        --locality: 0;
        animation: time 43200s steps(43200) infinite;
    }

    .min {
        width: 6px;
        height: 60px;
        background-color: #aaa;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -3px;
        transform-origin: top center;
        --locality: 0;
        animation: time 3600s steps(3600) infinite;
    }

    .s {
        width: 4px;
        height: 70px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -2px;
        transform-origin: top center;
        --locality: 0;
        animation: time 60s steps(60) infinite;
    }

    @keyframes time {
        form {}

        to {
            transform: rotate(calc(var(--locality) * 1deg + 360deg));
            /* transform: rotate(360deg) */
        }
    }
</style>

<body>
    <div class="fu">
        <div class="itme1"></div>
        <div class="itme2"></div>
        <div class="itme3"></div>
        <div class="itme4"></div>
        <div class="itme5"></div>
        <div class="itme6"></div>
        <div class="p1">
            <div class="number">
                <em class="em1">1</em>
                <em class="em2">2</em>
                <em class="em3">3</em>
                <em class="em4">4</em>
                <em class="em5">5</em>
                <em class="em6">6</em>
                <em class="em7">7</em>
                <em class="em8">8</em>
                <em class="em9">9</em>
                <em class="em10">10</em>
                <em class="em11">11</em>
                <em class="em12">12</em>
            </div>
        </div>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="s"></div>
        <div class="centre"></div>
    </div>
</body>
<script>
    let hours = document.querySelector('.hour');
    let mins = document.querySelector('.min');
    let ss = document.querySelector('.s');
    let time = new Date();
    let hour = time.getHours();
    let min = time.getMinutes();
    let s = time.getSeconds();
    if (hour <= 12) {
        hours.style.transform = `rotate(${hour * 30}deg)`;
    } else if (hour > 12) {
        hours.style.transform = `rotate(${(hour - 12) * 30}deg)`;
    }
    mins.style.transform = `rotate(${min * 6}deg)`;
    ss.style.transform = `rotate(${s * 6}deg)`;
    //改变变量值
    ss.style.setProperty('--locality', `${s * 6}`);
    mins.style.setProperty('--locality', `${min * 6}`);
    if (hour <= 12) {
        hours.style.setProperty('--locality', `${hour * 30}`);
    } else if (hour > 12) {
        hours.style.setProperty('--locality', `${(hour - 12) * 30}`);
    }
    // 动画： 50s 分50步，每步1s
    // 动画范围： 60deg 转到 420deg 转了360deg
    // 每秒： 360 / 50 7.2deg
</script>

</html>